<template>
  <div class="main">
    <h1 class="title">请选择一个游戏</h1>
    <div class="list" :style="{ height: listHeight + 'px' }">
      <div class="item" v-for="(g, i) in gameList" :key="g.id" @click="$router.push(g.path)">
        {{ i + 1 }}. {{ g.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
type Game = {
  id: string
  name: string
  path: string
}
const gameList: Game[] = [
  {
    id: "1",
    name: "五子棋",
    path: "/games/gobang",
  },
  {
    id: "2",
    name: "俄罗斯方块",
    path: "/games/sliding-blocks",
  },
  // {
  //   id: "3",
  //   name: "五子棋",
  //   path: "/games/gobang",
  // },
  // {
  //   id: "4",
  //   name: "五子棋",
  //   path: "/games/gobang",
  // },
]
let listHeight = (gameList.length >> 1) * 26
</script>

<style lang="scss" scoped>
.main {
  width: 50vw;
  position: absolute;
  margin: 30vh auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-family: YouSheBiaoTiHei;

  .title {
    text-align: center;
    font-size: 35px;
  }

  .list {
    padding: 20px;
    display: flex;
    flex-flow: row wrap;
    font-size: 20px;
    .item {
      width: 50%;
      padding: 5px 0;
      text-align: center;
      transition: 0.4s;
      cursor: pointer;
      &:hover {
        color: #4896da;
      }
    }
  }

  @media screen and (max-width: 750px) {
    margin: 25vh auto;

    .list {
      flex-flow: column;

      .item {
        width: 100%;
      }
    }
  }
}
</style>
